<template>
  <div class="home">
    <div class="header-box" v-show="code!=4">
      <div class="left-box">
          <div class="position"><van-icon name="location" /><span>郑州</span><img src="" alt=""></div>
          <div class="weather">晴 20℃/9℃</div>
      </div>
     <h3>游客公共服务平台</h3>
  </div>
    <Nav :Active="3"></Nav>
    <!-- 首页默认弹层 搜索+导航 -->
    <div class="home-prop">
      <!-- arrow -->
      <div class="home-arrow">
        <img v-show="code==0" src="@/assets/images/home-arrow.png" alt @click="showAllScenic"/>
        <img v-show="code!=0&code!=3" src="@/assets/images/home-arrow-shouqi.png" alt @click="showNavList"/>
        <img v-show="code==3" src="@/assets/images/home-arrow-zhankai.png" alt @click="showScenicList">
      </div>
      <!-- 搜索框 -->
      <div :class="{active:code==1}" class="search-box" v-show="code!=2">
        <input type="text" placeholder="搜景区、搜服务、搜美食" @focus="getSearchList()"/>
        <img src="@/assets/images/search.png" alt="搜索" />
        <button>搜索</button>
      </div>
      <!-- 首页导航 -->
      <div class="home-navlist" v-show="code==0">
        <div @click="getScenic">
          <img src="@/assets/images/home-nav-scenic.png" alt />
          景区
        </div>
        <div @click="getHotel">
          <img src="@/assets/images/home-nav-hotel.png" alt />
          酒店
        </div>
        <div @click="getFood">
          <img src="@/assets/images/home-nav-food.png" alt />
          美食
        </div>
        <div @click="getWc(2)">
          <img src="@/assets/images/home-nav-wc.png" alt />
          洗手间
        </div>
        <div @click="getPark(1)">
          <img src="@/assets/images/home-nav-park.png" alt />
          停车场
        </div>
        <div @click="showAllScenic">
          <img src="@/assets/images/home-nav-all.png" alt />
          全部
        </div>
      </div>
      <!-- 搜索列表 -->
      <div class="search-list-box" v-show="code==1">
        <p v-for="item in searchList" :key="item.id" @click="doSearch(item.id)"><img src="@/assets/images/search.png" alt="">{{item.text}}</p>
      </div>
      <!-- 全部资源 -->
      <div class="home-all-scenic" v-show="code==2">
        <h3 class="home-scenic-title"><img src="@/assets/images/home-scenic-title.png" alt="">旅游资源</h3>
        <div class="home-scenic-listbox">
          <div class="scenic-listitem" v-for="(value,i) in scenicList" :key="i">
            <h3>{{value.title}}</h3>
            <div>
              <span v-for="(valueItem,u) in value.list" :key="u">{{valueItem}}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 景区列表 -->
      <div class="home-scenic-infoList" v-show="code==3">
        <div class="scenic-infoList-banner">
          <img src="@/assets/temporary/scenic-banner.png" alt="">
        </div>
        <div class="scenic-infoList-box">
          <router-link to="/scenicDetail" class="scenic-infoList-item" v-for="(listItem,i) in infoList" :key=i>
            <div class="img-box">
              <img :src="listItem.src" alt="">
            </div>
            <div class="item-info-box">
              <h3 class="item-info-title">{{listItem.title}}</h3>
              <p class="item-info-distance">{{listItem.distance}}</p>
              <div class="item-info-level">
                <van-icon name="star" color="#FF0000"/><van-icon name="star" color="#FF0000"/><van-icon name="star" color="#FF0000"/><van-icon name="star" color="#FF0000"/><van-icon name="star" color="#CCCCCC"/><span>{{listItem.level}}</span>
              </div>
              <div class="item-info-label">
                <span v-for="(label,b) in listItem.labelList" :key="b">{{label}}</span>
              </div>
              <div class="item-info-line">{{listItem.line}}</div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
      <!-- 地图右侧列表 -->
    <div class="map-right-box">
      <router-link to="road" :class="{active:isActive==0}">
        <img src="@/assets/images/map-right-road.png" alt />
        <img class="active" src="@/assets/images/map-right-roadA.png" alt />
        路况
      </router-link>
      <router-link to="flow" :class="{active:isActive==1}">
        <img src="@/assets/images/map-right-flow.png" alt />
        <img class="active" src="@/assets/images/map-right-flowA.png" alt />
        客流
      </router-link>
      <router-link to="weather" :class="{active:isActive==2}">
        <img src="@/assets/images/map-right-weather.png" alt />
        <img class="active" src="@/assets/images/map-right-weatherA.png" alt />
        气象
      </router-link>
      <router-link to="report" :class="{active:isActive==3}">
        <img src="@/assets/images/map-right-report.png" alt />
        <img class="active" src="@/assets/images/map-right-reportA.png" alt />
        上报
      </router-link>
    </div>
    <baidu-map
      class="map"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      :double-click-zoom="false"
    >
   <bm-marker :position="markerPoint1" :icon="{url:marker, size: {width: 26, height:32}}" @click="goNext(0)">
      <bm-label content="嵩山国家风景名胜区" :labelStyle="{color: '#333', fontSize : '12px',border:0,borderRadius:'4px',padding:'2px 4px'}"/>
    </bm-marker> 
   <bm-marker :position="markerPoint2" :icon="{url:marker, size: {width: 26, height:32}}">
     <bm-label content="双龙山" :labelStyle="{color: '#333', fontSize : '12px',border:0,borderRadius:'4px',padding:'2px 4px'}"/>
     </bm-marker> 
   <bm-marker :position="markerPoint3" :icon="{url:marker, size: {width: 26, height:32}}">
     <bm-label content="怪坡旅游区" :labelStyle="{color: '#333', fontSize : '12px',border:0,borderRadius:'4px',padding:'2px 4px'}"/>
     </bm-marker> 
   <bm-marker :position="markerPoint4" :icon="{url:marker, size: {width: 26, height:32}}">
     <bm-label content="大鸿寨" :labelStyle="{color: '#333', fontSize : '12px',border:0,borderRadius:'4px',padding:'2px 4px'}"/>
     </bm-marker> 
   <bm-marker :position="hotelPoint1" :icon="{url:hotelMarker, size: {width: 26, height:33}}">
     <bm-label content="789商务酒店" :labelStyle="{color: '#333', fontSize : '12px',border:0,borderRadius:'4px',padding:'2px 4px'}"/>
     </bm-marker> 
   <bm-marker :position="hotelPoint2" :icon="{url:hotelMarker, size: {width: 26, height:33}}">
     <bm-label content="如家商务宾馆" :labelStyle="{color: '#333', fontSize : '12px',border:0,borderRadius:'4px',padding:'2px 4px'}"/>
     </bm-marker> 
     <bm-marker :position="foodPoint1" :icon="{url:foodMarker, size: {width: 26, height:33}}">
     <bm-label content="卢店烩羊肉" :labelStyle="{color: '#333', fontSize : '12px',border:0,borderRadius:'4px',padding:'2px 4px'}"/>
     </bm-marker> 
   <bm-marker :position="foodPoint2" :icon="{url:foodMarker, size: {width: 26, height:33}}">
     <bm-label content="
刘阳家休闲庄园" :labelStyle="{color: '#333', fontSize : '12px',border:0,borderRadius:'4px',padding:'2px 4px'}"/>
     </bm-marker> 
    </baidu-map>
  </div>
</template>

<script>
// @ is an alias to /src
// import Header from "@/components/Header/Header.vue";
import Nav from "@/components/Nav/Nav.vue";
import item1 from "@/assets/temporary/list-item1.png"
import item2 from "@/assets/temporary/list-item2.png"
import item3 from "@/assets/temporary/list-item3.png"
import marker from "@/assets/images/marker.png"
import hotelMarker from "@/assets/images/hotelMarker.png"
import foodMarker from "@/assets/images/foodMarker.png"
import wcMarker from "@/assets/images/wcMarker.png"
export default {
  name: "home",
  components: {
    // Header,
    Nav
  },
  data() {
    return {
      center: {lng:112.998942, lat:34.089087},
      zoom: 10,
      marker:marker,
      hotelMarker:hotelMarker,
      foodMarker:foodMarker,
      wcMarker:wcMarker,
      markerPoint1:{},
      markerPoint2:{},
      markerPoint3:{},
      markerPoint4:{},
      hotelPoint1:{},
      hotelPoint2:{},
      hotelPoint3:{},
      foodPoint1:{},
      foodPoint2:{},
      points:[],
      // 地图右侧列表 是否选中 0路况 1客流  2气象  3上报
      isActive: -1,
      // 弹层 0导航列表 1搜索列表 2全部资源 3景区列表
      code:0,
      searchList:[
        {id:0,text:'城市公园'},{id:4,text:'生态旅游'},{id:5,text:'博物馆'},{id:1,text:'停车场'},{id:2,text:'厕所'},{id:3,text:'住宿'}
        ],
      scenicList:[
        {title:'游览',list:['城市公园','游览景区','生态旅游','博物馆','纪念馆','游乐园','乡村旅游','宗教场所','旅游会展','旅游会展']},{title:'住宿',list:['酒店','民俗']},{title:'餐饮',list:['火锅','中餐']},{title:'出行',list:['旅游大巴','客运站','火车站','高铁站','停车场','机场','港口','租车']},{title:'购物',list:['土特产','文创产品']},{title:'娱乐',list:['文艺表演','表演场所','室内娱乐','旅游摄影','健身娱乐','洗浴','保健旅游','其它娱乐']},{title:'综合',list:['导游','旅行社','厕所','集散中心','咨询中心','咨询中心','咨询中心']}
        ],
        infoList:[
        {src:item1,title:'嵩山国家风景名胜区',distance:'18.1km | 惠济区',level:'4A景区',labelList:['登山','烧烤','一日游','情侣约会','赏花胜地'],line:'中华民族之魂'},{src:item2,title:'双龙山省级森林公园',distance:'14.1km | 城东路',level:'3A景区',labelList:['情侣约会','古色古香','重点文物保护单位'],line:'距离东大街地铁站（E口）步行887米'},{src:item3,title:'怪坡旅游区',distance:'4.1km | 西流湖',level:'寺庙',labelList:['免费项目','交通便利','人气旺','设施新全'],line:'距后仓村公交站步行106米'},{src:item1,title:'大鸿寨',distance:'18.1km | 惠济区',level:'4A景区',labelList:['登山','烧烤','一日游','情侣约会','赏花胜地'],line:'中华民族之魂'},{src:item1,title:'郑州黄河风景名胜区',distance:'18.1km | 惠济区',level:'4A景区',labelList:['登山','烧烤','一日游','情侣约会','赏花胜地'],line:'中华民族之魂'},{src:item1,title:'郑州黄河风景名胜区',distance:'18.1km | 惠济区',level:'4A景区',labelList:['登山','烧烤','一日游','情侣约会','赏花胜地'],line:'中华民族之魂'}
        ],
        // dropdown-menu
        value1:'01',
        value2:'11',
        value3:'21',
        value4:'31',
        option1: [
          { text: '附近', value: '01' },
          { text: '新款商品', value: '02' },
          { text: '活动商品', value: '03' }
        ],
        option2: [
          { text: '类别', value: '11'},
          { text: '好评排序', value: '12' },
          { text: '销量排序', value: '13' },
        ],
        option3: [
          { text: '排序', value: '21' },
          { text: '好评排序', value: '22' },
          { text: '销量排序', value: '23' },
        ],
        option4: [
          { text: '筛选', value: '31' },
          { text: '好评排序', value: '32' },
          { text: '销量排序', value: '33'},
        ]
    };
  },
  methods:{
    // 添加标点
    addScenicPoints () {
      this.markerPoint1={lng:113.01504, lat:34.5204}
      this.markerPoint2={lng:112.750578, lat:34.522304}
      this.markerPoint3={lng:112.913854, lat:34.264936}
      this.markerPoint4={lng:113.097827, lat:34.24584}
    },
    // 添加酒店标点
    addHotelPoints () {
      this.hotelPoint1={lng:113.15905,lat:34.466444}
      this.hotelPoint2={lng:112.967532,lat:34.5221}
    },
     
    // 添加饭店标点
    addfoodPoints () {
      this.foodPoint1={lng:113.166696,lat:34.466093}
      this.foodPoint2={lng:113.065545,lat:34.543845}
    },
    // 标记点点击事件
    goNext(id){
      this.$router.push({path:'/resources',query:{id:id}})
    },
    // 获取搜索列表
    getSearchList(){
      this.code=1
    },
    doSearch(id){
     this.$router.push({path:'/resources',query:{id:id}})
    },
    // 收起
    showNavList(){
      this.code=0
    },
    // 展开
    showAllScenic(){
      this.code=2
    },
    showScenicList(){
      this.$router.push({path:'scenic'})
    },
    // 景区
    getScenic(){
      console.log(12)
      this.code=3
       this.addScenicPoints ()
    },
    getHotel(){
      this.addHotelPoints ()
    },
    getFood(){
this. addfoodPoints()
    },
    getWc(id){
this.$router.push({path:'/resources',query:{id:id}})
    },
    getPark(id){
this.$router.push({path:'/resources',query:{id:id}})
    },
  }
};
</script>
<style lang="less" scope>
.home{
  position: relative;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
}
.header-box{
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 88/7.5vw;
    box-sizing: border-box;
    text-align: center;
    z-index: 99999999;
    background-color: #fff;
    h3{
        color: #333;
    font-size: 36/7.5vw;
    font-family: PingFang SC;
    line-height: 88/7.5vw;
    margin:0;
    }
    
    .left-box{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        position: absolute;
        left: 24/7.5vw;
        width:150/7.5vw;
        height:100%;
        padding:10/7.5vw 0;
        font-size: 28/7.5vw;
        .position{
            >i{
                vertical-align: middle;
            }
            >img{
                width:25/7.5vw;
                vertical-align: middle;
            }
            >span{
                margin:0 8/7.5vw;
            }
        }
        .weather{
            font-size: 16/7.5vw;
            margin-left:10/7.5vw;
        }
    }
}
.home-prop {
  position: absolute;
  width: 100%;
  height: auto;
  padding: 0 20/7.5vw;
  bottom: 98/7.5vw;
  border-radius: 20/7.5vw 20/7.5vw 0 0;
  background-color: #fff;
  z-index: 2;
  box-sizing: border-box;
  .home-arrow {
    position: absolute;
    top: 10/7.5vw;
    left: 50%;
    transform: translateX(-50%);
    width: 70/7.5vw;
    > img {
      display: block;
      width: 100%;
    }
  }
  .search-box {
    position: relative;
    width: 100%;
    height: 80/7.5vw;
    margin: 30/7.5vw 0;
    > input {
      height: 100%;
      width: 100%;
      padding-left: 60/7.5vw;
      border-radius: 20/7.5vw;
      border: 1px solid #e6e6e6;
      background-color: #f5f8ff;
    }
    > img {
      position: absolute;
      width: 35/7.5vw;
      left: 17/7.5vw;
      top: 50%;
      transform: translateY(-50%);
    }
    >button{
      display: none;
      position: absolute;
      right: 0;
      top:50%;
      transform: translateY(-50%);
      width: 116/7.5vw;
      height: 48/7.5vw;
      border-left: 1px solid #CCCCCC;
      font-size: 28/7.5vw;
      color: #333;
      background-color: transparent;

    }
    &.active{
      >input{
        padding-left: 40/7.5vw;
      }
      >img{
        display: none;
      }
      >button{
        display: block;
      }
    }
  }
  .home-navlist {
    margin-bottom: 40/7.5vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
    > div{
      font-size: 28/7.5vw;
      color: #666;
      text-align: center;
      > img {
        display: block;
        width: 80/7.5vw;
        margin-bottom: 10/7.5vw;
      }
    }
  }
  // 搜索列表
  .search-list-box{
    padding: 0 17/7.5vw;
    height: calc(100vh - 45vw);
    box-sizing: border-box;
    overflow-y: auto;
    >p{
      line-height: 90/7.5vw;
      border-bottom: 1px solid #F2F2F2;
      font-size: 32/7.5vw;
      >img{
        width: 35/7.5vw;
        margin-right: 20/7.5vw;
        vertical-align: middle;
      }
    }
  }
  // 全部资源
  .home-all-scenic{
    height:calc(100vh - 32vw);
    box-sizing: border-box;
    
    .home-scenic-title{
      margin-top:40/7.5vw;
      padding:20/7.5vw 0;
      text-align: center;
      font-size: 40/7.5vw;
      font-weight: 500;
      color: #333;
      border-bottom: 1px solid #F2F2F2;
      >img{
        width: 48/7.5vw;
        margin-right: 13/7.5vw;
        vertical-align: middle;
      }
    }
    .home-scenic-listbox{
      height: calc(100vh - 50vw);
      overflow-y: auto;
      .scenic-listitem{
        &:nth-of-type(1){
         >h3{
            border-left-color: #FF0000;
         }
        }
        &:nth-of-type(2){
         >h3{
            border-left-color: #FF9000;
         }
        }
        &:nth-of-type(3){
         >h3{
            border-left-color: #FFFC00;
         }
        }
        &:nth-of-type(4){
         >h3{
            border-left-color: #1EFF00;
         }
        }
        &:nth-of-type(5){
         >h3{
            border-left-color: #00F6FF;
         }
        }
        &:nth-of-type(6){
         >h3{
            border-left-color: #002AFF;
         }
        }
        &:nth-of-type(7){
         >h3{
            border-left-color: #FF00F0;
         }
        }
        >h3{
          font-size: 32/7.5vw;
          margin:40/7.5vw 0 20/7.5vw 0; 
          padding-left: 20/7.5vw;
          border-left: 4/7.5vw solid;
        }
        >div{
          display: flex;
          flex-wrap: wrap;
          >span{
            display: block;
            width: 25%;
            margin:20/7.5vw 0;
            padding-left: 15/7.5vw;
            border-left: 1px solid #ccc;
            box-sizing: border-box;
            font-size: 28/7.5vw;
          }
        }
      }
    }
  }
  // 景区列表
  .home-scenic-infoList{
    .scenic-infoList-banner{
      height: 150/7.5vw;
      border-radius:4/7.5vw;
      >img{
        display: block;
        width: 100%;
      }
    }
    .scenic-infoList-box{
      height: 520/7.5vw;
      overflow-y: scroll;
      .scenic-infoList-item{
        height: 295/7.5vw;
        padding: 30/7.5vw 0;
        border-bottom: 1px solid #F2F2F2;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        >.img-box{
          width: 140/7.5vw;
          height: 186/7.5vw;
          border-radius: 4/7.5vw;
          margin-right: 20/7.5vw;
          >img{
            display: block;
            width: 100%;
          }
        }
        >.item-info-box{
          flex:1;
          .item-info-title{
            font-size: 36/7.5vw;
            font-weight: 500;
          }
          .item-info-distance{
            font-size: 28/7.5vw;
          }
         .item-info-level{
            font-size: 24/7.5vw;
            margin: 10/7.5vw 0;
          }
          .item-info-label{
            span{
              display: inline-block;
              padding: 0 12/7.5vw;
              margin-right: 10/7.5vw;
              background-color: #FFF6EF;
              color: #CB955C;
              font-size: 24/7.5vw;
              &:last-child{
                margin-right: 0;
              }
            }
          }
          .item-info-line{
            font-size: 28/7.5vw;
            color: #999;
            margin-top:10/7.5vw;
          }
        }
      }
    }
  }
}
.map {
  width: 100%;
  height: 100vh;
}
.map-right-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  right: 10/7.5vw;
  top: 118/7.5vw;
  width: 80/7.5vw;
  height: 400/7.5vw;
  padding:10/7.5vw;
  border-radius: 6/7.5vw;
  background-color: #fff;
  box-sizing: border-box;
  color: #666;
  font-size: 20/7.5vw;
  z-index: 1;
  box-shadow: 2px 2px 10px rgba(0,0,0,.3),-2px -2px 10px rgba(0,0,0,.3);
  >a{
    flex: 1;
    border-top: 1px solid #E6E6E6;
    &:nth-of-type(1){
      border-top: 0;
      img{
        margin-bottom: 15/7.5vw;
      }
    }
    img {
      display: block;
      width: 40/7.5vw;
      margin: 0 auto;
      margin-top:15/7.5vw;
      &.active {
        display: none;
      }
    }
    &.active{
      img{
        display: none;
        &.active{
          display: block;
        }
      }
    }
  }
}
</style>